.sw-step-item {
    height: var(--scale-size-32);
    margin: var(--scale-size-20) 0;
    display: flex;
    align-items: center;
    position: relative;

    &::before {
        content: "";
        width: 3px;
        height: var(--scale-size-20);
        background: var(--color-background-tertiary-default);
        position: absolute;
        left: 14.5px;
        top: -20px;
    }

    &:first-child {
        margin-top: 0;

        &::before {
            display: none;
        }
    }

    .sw-step-item__bubble {
        width: var(--scale-size-32);
        height: var(--scale-size-32);
        border-radius: 50%;
        background: var(--color-background-tertiary-default);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .sw-step-item__description {
        padding-left: var(--scale-size-10);
        font-size: var(--font-size-xs);
        line-height: var(--font-line-height-xs);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary-default);
    }

    &.sw-step-item--disabled {
        .sw-step-item__bubble {
            background-color: var(--color-background-tertiary-default);
        }

        .sw-step-item__icon {
            color: var(--color-icon-secondary-disabled);
        }
    }

    &.sw-step-item--info {
        .sw-step-item__bubble {
            background-color: var(--color-background-brand-default);
        }

        .sw-step-item__icon {
            color: var(--color-icon-brand-default);
        }
    }

    &.sw-step-item--error {
        .sw-step-item__bubble {
            background-color: var(--color-background-critical-default);
        }

        .sw-step-item__icon {
            color: var(--color-icon-critical-default);
        }
    }

    &.sw-step-item--success {
        .sw-step-item__bubble {
            background-color: var(--color-background-positive-default);
        }

        .sw-step-item__icon {
            color: var(--color-icon-positive-default);
        }
    }

    &.sw-step-item--active {
        .sw-step-item__description {
            color: var(--color-text-primary-default);
            font-weight: var(--font-weight-semibold);
        }
    }
}
